<!DOCTYPE html>

<html>
<head>
	<title>HTML5 Forms例子</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" href = "html5.css">

	<style type="text/css">

	label {
		text-align: right;
		width: 90px;
		float: left;
	}

	input {
		margin-top: 0px;
		padding-top: 0px;
	}

	fieldset {
		margin-top: 5px;
	}

	#confidenceDisplay {
		vertical-align: top;
	}
	</style>

	<script>
		function setConfidence(newVal) {
			document.getElementById("confidenceDisplay").innerHTML = newVal + '%';
		}

		function invalidHandler(evt) {
			// find the label for this form control
			var label = evt.srcElement.parentElement.getElementsByTagName("label")[0];

			// set the label's text color to red
			label.style.color = 'red';

			// stop the event from propagating higher
			evt.stopPropagation();

			// stop the browser's default handling of the validation error
			evt.preventDefault();
		}
		function loadDemo() {
		   // register an event handler on the form to
		   // handle all invalid control notifications
		   document.register.addEventListener("invalid", invalidHandler, true);
		}

		window.addEventListener("load", loadDemo, false);

	</script>

</head>

<body>
    <div id="container">
    <header>
        <h1>HTML5 Forms例子</h1>
        <h3 align="center"></h3>
        <h2>&nbsp;</h2>
        <h4></h4>
    </header>

    <nav>
        <h2>链接</h2>
        <a href="#" title="Home">主页</a>
        <a href="signup.html" title="Are you crazy enough?">注册</a>
        <a href="#" title="Learn more about the T216">关于</a>
    </nav>

    <section>
      <article>
        <h2>注册</h2>       
       
        <form name="register">
          <p><label for="runnername">姓名:</label>
             <input id="runnername"name="runnername" type="text"
                    placeholder="请填写姓名" required></p>
          <p><label for="phone">电话:</label>
             <input id="phone" name="phone" type="tel"
                    placeholder="(xxx) xxx-xxx"></p>
          <p><label for="emailaddress">E-mail:</label>
             <input id="emailaddress" name="emailaddress" type="email"
                    placeholder="请正确填写"></p>
          <p><label for="dob">日期:</label>
             <input id="dob" name="dob" type="date"
                    placeholder="MM/DD/YYYY"></p>
          <fieldset>
            <legend>大小: </legend>
            <p><input id="small" type="radio" name="tshirt" value="small">
               <label for="small">小</label></p>
            <p><input id="medium" type="radio" name="tshirt" value="medium">
               <label for="medium">中</label></p>
            <p><input id="large" type="radio" name="tshirt" value="large">
               <label for="large">大</label></p>
            <p><label for="style">样式:</label>
               <input id="style" name="style" type="text" list="stylelist" title="Years of participation"></p>
            <datalist id="stylelist">
             <option value="白" label="第一年">
             <option value="灰" label="第二至四年">
             <option value="深蓝" label="V五年以上">
            </datalist>
          </fieldset>
         <fieldset>
            <legend>预期:</legend>
            <p>
            <label for="confidence">可信度:</label>
            <input id="confidence" name="level" type="range"
                   onchange="setConfidence(this.value)"
                   min="0" max="100" step="5" value="0">
            <span id="confidenceDisplay">0%</span></p>
            <p><label for="notes">备注:</label>
               <textarea id="notes" name="notes" maxLength="140"></textarea></p>
         </fieldset>

         <p><input type="submit" name="register" value="注册"></p>
        </form>
      </article>
    </section>

    <aside>
      <h2>发起者</h2>
      <p align="center">***俱乐部</p>
     <p align="center"><img src="happy-trails-rc.gif" alt="Happy Trails Running Club" width="149" height="207"></p>
    </aside>

    <footer>
        <p>Powered by HTML5</p>
    </footer>

    </div>
</body>
</html>